import React, { useCallback, useState } from 'react'
import { PlusCircleFilled, LeftOutlined, RightOutlined, ArrowRightOutlined, EyeOutlined, QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
import HomeNav from '../../components/Placard/Select/HomeNav';
import HomeSearch from '../../components/Placard/Select/HomeSearch';
import HomeSwipet from '../../components/Placard/Select/HomeSwipet';

import { options, adList, todayRecommendedList, swiperNev, templateList, VideoList, LongList, SlideList, CardList } from '../../data/Tool'
import { useNavigate } from 'react-router';
// 视频
import Video from '../../components/Placard/Video';
// 长图 
import Long from '../../components/Placard/Long';
// 多页 
import Slide from '../../components/Placard/Slide'
// 海报 
import Card from '../../components/Placard/Card';
import TemplateList from '../../components/Placard/TemplateList';
import { Image } from 'react-vant';
// 回到顶部
import { FloatButton } from 'antd';

function Select() {
  // 海报数据
  let TemplateComList = [
    {
      title: '邀请函·高端会议必备',
      tabList: ['商务会议', '新品发布', '开业邀请', '招商引资', '婚礼邀请', '展会邀请', '更多分类'],
      componentArray: [
        <Video VideoList={VideoList[3]} />,
        <Long LongList={LongList[5]} />,
        <Slide SlideList={SlideList[0]} />,
        <Card CardList={CardList[3]} />,
        <Video VideoList={VideoList[1]} />,
        <Long LongList={LongList[1]} />,
        <Slide SlideList={SlideList[1]} />,
        <Card CardList={CardList[1]} />,
        <Video VideoList={VideoList[2]} />,
        <Long LongList={LongList[0]} />,
        <Long LongList={LongList[0]} />,
        <Slide SlideList={SlideList[1]} />,
        <Slide SlideList={SlideList[0]} />,
        // <Card CardList={CardList[0]}/>
      ]

    },
    {
      title: '产品促销·六一儿童节',
      tabList: ['产品促销', '活动邀请', '放假通知', '节日祝福', '更多分类'],
      componentArray: [
        <Video VideoList={VideoList[5]} />,
        <Long LongList={LongList[1]} />,
        <Video VideoList={VideoList[7]} />,
        <Slide SlideList={SlideList[2]} />,
        <Card CardList={CardList[1]} />,
        <Video VideoList={VideoList[2]} />,
        <Long LongList={LongList[0]} />,
        <Slide SlideList={SlideList[1]} />,
        <Long LongList={LongList[4]} />,
        <Slide SlideList={SlideList[0]} />,
        <Card CardList={CardList[4]} />,
        <Video VideoList={VideoList[6]} />,
        <Card CardList={CardList[6]} />,
        <Long LongList={LongList[2]} />,
      ]
    },
    {
      title: '培训招生·领跑新学期',
      tabList: ['幼儿园招生', '招生简章', '招生海报', '美术绘画', '更多分类'],
      componentArray: [
        <Video VideoList={VideoList[0]} />,
        <Card CardList={CardList[0]} />,
        <Long LongList={LongList[1]} />,
        <Slide SlideList={SlideList[1]} />,
        <Card CardList={CardList[1]} />,
        <Video VideoList={VideoList[2]} />,
        <Card CardList={CardList[2]} />,
        <Long LongList={LongList[4]} />,
        <Slide SlideList={SlideList[0]} />,
        <Card CardList={CardList[4]} />,
        <Video VideoList={VideoList[7]} />,
        <Long LongList={LongList[0]} />,
        <Slide SlideList={SlideList[2]} />,
        <Video VideoList={VideoList[5]} />,
      ]
    },
    {
      title: '全民关注·为人民而生',
      tabList: ['低碳节能', '文明城市', '工作总结', '党会知识', '更多分类'],
      componentArray: [
        <Video VideoList={VideoList[6]} />,
        <Long LongList={LongList[0]} />,
        <Long LongList={LongList[1]} />,
        <Slide SlideList={SlideList[1]} />,
        <Card CardList={CardList[5]} />,
        <Video VideoList={VideoList[5]} />,
        <Long LongList={LongList[2]} />,
        <Slide SlideList={SlideList[0]} />,
        <Video VideoList={VideoList[4]} />,
        <Slide SlideList={SlideList[2]} />,
        <Card CardList={CardList[4]} />,
        <Video VideoList={VideoList[2]} />,
        <Long LongList={LongList[3]} />,
        <Long LongList={LongList[4]} />,
      ]
    }

  ]




  // 今日推荐nav 
  let [i, setI] = useState(0)
  const handleMouseOver = (index: number) => {
    setI(index)
  }

  // 空白 
  const navigate = useNavigate()
  const headleCreate = () => {
    if (JSON.parse(localStorage.getItem('token') as string)) {
      navigate('/create')
    } else {
      alert('请登录')
    }
  }

  // 海报 
  // 左右箭头 
  const [position, setPosition] = useState(0);
  const handleMove = (direction: 'left' | 'right') => {
    if (direction === 'left') {
      setPosition(0);
    } else {
      setPosition(-800)
    }
  }


  return (
    <div className='Recommenede'>
      {/* 搜索框 */}
      <HomeSearch options={options} swiperNev={swiperNev}></HomeSearch>
      {/* 轮播图 */}
      <HomeSwipet></HomeSwipet>
      {/* 导航  */}
      <HomeNav adList={adList}></HomeNav>
      {/* 今日推荐  */}
      <div className='HomeToday'>
        {/* 今日推荐导航  */}
        <div className='Today'>
          <div>
            <h3>今日推荐</h3>
            <a href="/login" style={{ color: '#CDA381' }}>开通会员免费用</a>
            <ul>
              {
                todayRecommendedList.map((item: any, index: number) => (
                  <span className='tabSpan' key={index}>{item.title}</span>
                ))
              }
            </ul>
          </div>
          <p>查看更多&gt;</p>
        </div>

        <div className='TodayBlank'>
          {/* 空白创建  */}
          <div className='Blank' >
            <div onClick={headleCreate}>
              <PlusCircleFilled style={{ fontSize: '50px', color: '#1261FF' }} />
              <h4 style={{ color: '#3e3e3e' }}>空白创建</h4>
            </div>
            <img src="../public/image/createAd.webp" alt="" />
          </div>
          {/* 海报 */}
          <div className='Blank_list'>
            <div className="placard" style={{ transform: `translateX(${position}px)` }} >
              {
                templateList[i].map((item, index) => (
                  <div className='placard_item' key={index}>
                    <div className="placard_item_main">
                      <img src={item.url} alt="" />

                      {/* 弹框  */}
                      {/* <div className='overlay'>
                        <div>查看套装内模版</div>
                      </div> */}
                    </div>
                    <div className='tab_show'>
                      <p>{item.title}</p>
                      <div className='Navigation_info'>
                        <div className='Navigation_info_user'>
                          <img width={20} src={item.img} alt="" />
                          <span>{item.name}</span>
                        </div>
                        <span><EyeOutlined />{item.num}</span>
                      </div>
                    </div>
                  </div>
                ))
              }
              {/* 海报查看更多 */}
              <div style={{ background: '#fff' }} className='Navigation_info_more'>
                <p><ArrowRightOutlined /></p>
                <h4>查看更多</h4>
              </div>
            </div>
            {/* 左右箭头  */}
            <button style={{ display: position === 0 ? 'none' : 'block' }} className='tab_Navigation_left' onClick={() => handleMove('left')}><LeftOutlined /></button>
            <button style={{ display: position !== 0 ? 'none' : 'block' }} className='tab_Navigation_right' onClick={() => handleMove('right')}><RightOutlined /></button>
          </div>
        </div>
      </div>
      {/* 广告  */}
      <img src="../../public/image/homeAd.webp" alt="" />
      {/* 海报渲染 */}
      {
        TemplateComList.map((item, index) => (

          <TemplateList TemplateList={item} key={index} />

        ))
      }
      {/* 广告  */}
      <img src="../public/image/homeAd2.webp" alt="" />
      {/* 设计大咖 */}
      <div >
        <HomeNav adList={adList}></HomeNav>
      </div>
      <img src="../public/image/foot.jpg" alt="" />

      <Image  style={{height:'200px'}} src='x.jpg'></Image>
      {/* 侧边定位  */}
      {/* <div className='HomeRight'>
        <div>收藏</div>
        <div>会员</div>
        <div>
          企业
          采购
        </div>
        <div><QuestionCircleOutlined /></div>
        <div></div>
        <div></div>
        <div style={{ height: '1vh', padding: 10 }}> <FloatButton.BackTop /></div>
      </div> */}
    </div>                      
  )
}

export default Select
